<!-- 我是预约 -->
<template lang="html">
  <div class="yuyueBox">
    <el-row class="formBox box1">
        <el-col :span="2" class="text-right headLable">
          <span>订单号：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="form.orderNumb" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>产品名：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input size="small" v-model="form.productName" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>下单时间：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-date-picker
            v-model="form.orderTime"
            size="small"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
    </el-row>
    <el-row class="formBox">
      <el-col :span="2" class="text-right headLable">
        <span>客户名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.userName" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>客户手机：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input v-model="form.userPhone" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>预约时间：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-date-picker
          v-model="form.appointmentTime"
          size="small"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>

    </el-row>
    <el-row class="formBox box2">
       <el-col :span="2" :offset="2" class="text-left" style="margin-left:80px;">
         <el-button type="success" size="small" @click="find">筛选</el-button>
       </el-col>
    </el-row>

    <el-row class="tableBox" v-loading.body="$store.state.TanGoods.loading">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="未预约" name='one' >
          <ul class="listBox3">
              <li class="first">
                <span class="order">
                  <el-checkbox class="check allcheck"   v-model="checkAll" @change="handleCheckAllChange">订单号</el-checkbox>
                </span>
                <span class="name gray">产品名</span>
                <span class="price gray">单价</span>
                <span class="numb gray">数量</span>
                <span class="pay gray">实付</span>
                <span class="customer gray">客户</span>
                <span class="downTime green">下单时间</span>
                <span class="orderType gray">订单状态</span>
              </li>
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <li v-for="item in $store.state.TanGoods.yuyueList">
                <span class="order">
                  <el-checkbox class="check" :label="item.id"></el-checkbox>
                  <span>{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                </span>
                <span class="name text-left">
                  <p>{{item. productName}}</p>
                  <p class="txt">{{item.sku}}</p>
                </span>
                <span class="price text-left green">{{item.price?item.price/100:'0'}}</span>
                <span class="numb text-left">x{{item.count?item.count:'0'}}</span>
                <span class="pay text-left">{{item.payPrice?item.payPrice/100:'0'}}</span>
                <span class="customer text-left">
                  <p>{{item.customerName}}</p>
                  <p>{{item.customerPhone}}</p>
                </span>
                <span class="downTime">
                  <p>{{item.createTime | getDate}}</p>
                  <p>{{item.createTime | getTime}}</p>
                </span>
                <span class="orderType green" @click="changeDialog(5,item.id)">
                  预约
                </span>
              </li>
              </el-checkbox-group>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="待确认" name="two">
          <ul class="listBox3">
              <li class="first">
                <span class="order">订单号</span>
                <span class="name gray">产品名</span>
                <span class="price gray">单价</span>
                <span class="numb gray">数量</span>
                <span class="pay gray">实付</span>
                <span class="customer gray">客户</span>
                <span class="YYcontent gray">预约内容</span>
                <span class="updateTime green">预约时间</span>
                <span class="YYorderType gray">操作</span>
              </li>
              <li v-for="item in $store.state.TanGoods.yuyueList">
                <span class="order">{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                <span class="name text-left">
                  <p>{{item.productName}}</p>
                  <p class="txt">{{item.sku}}</p>
                </span>
                <span class="price text-left green">{{item.price?item.price/100:'0'}}</span>
                <span class="numb text-left">x{{item.count?item.count:'0'}}</span>
                <span class="pay text-left">{{item.payPrice?item.payPrice/100:'0'}}</span>
                <span class="customer text-left">
                  <p>{{item.customerName}}</p>
                  <p>{{item.customerPhone}}</p>
                </span>
                <span class="YYcontent">
                  <p v-html="item.appointmentContent"></p>
                </span>
                <span class="updateTime">
                  <p>{{item.updateTime | getDate}}</p>
                  <p>{{item.updateTime | getTime}}</p>
                </span>
                <span class="YYorderType">
                  <p>
                    <span class="green" @click="res(item.appointmentOrderId,1)">同意</span>
                    <span class="red" style="margin-left:10px;" @click="res(item.appointmentOrderId,2)">拒绝</span>
                  </p>
                </span>
              </li>
          </ul>
        </el-tab-pane>
        <!-- <el-tab-pane label="异常" name="three" >
          <ul class="listBox3">
              <li class="first">
                <span class="order">
                  <el-checkbox class="check allcheck"  v-model="checkAll" @change="handleCheckAllChange">订单号</el-checkbox>
                </span>
                <span class="name gray">产品名</span>
                <span class="price gray">单价</span>
                <span class="numb gray">数量</span>
                <span class="pay gray">实付</span>
                <span class="customer gray">客户</span>
                <span class="YYcontent gray">预约内容</span>
                <span class="downTime green">下单时间</span>
                <span class="orderType gray">异常原因</span>
              </li>
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <li v-for="item in $store.state.TanGoods.yuyueList">
                <span class="order">
                  <el-checkbox class="check" :label="item.id" ></el-checkbox>
                  <span>{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                </span>
                <span class="name text-left">
                  <p>{{item.productName}}</p>
                  <p class="txt">{{item.sku}}</p>
                </span>
                <span class="price text-left green">{{item.price}}</span>
                <span class="numb text-left">x{{item.count}}</span>
                <span class="pay text-left">{{item.payPrice}}</span>
                <span class="customer text-left">
                  <p>{{item.customerName}}</p>
                  <p>{{item.customerPhone}}</p>
                </span>
                <span class="YYcontent">
                  <p v-html="item.appointmentContent"></p>
                </span>
                <span class="downTime">
                  <p>{{item.createTime | getDate}}</p>
                  <p>{{item.createTime | getTime}}</p>
                </span>
                <span class="orderType">
                  <p>{{item.appointmentError}}</p>
                </span>
              </li>
              </el-checkbox-group>
          </ul>
        </el-tab-pane> -->
        <el-tab-pane label="全部" name="four" >
          <ul class="listBox3">
              <li class="first">
                <span class="order">订单号</span>
                <span class="name gray">产品名</span>
                <span class="price gray">单价</span>
                <span class="numb gray">数量</span>
                <span class="pay gray">实付</span>
                <span class="customer gray">客户</span>
                <span class="content gray">预约内容</span>
                <span class="downTime green">下单时间</span>
                <span class="updateTime green">更新时间</span>
                <span class="orderType gray">订单状态</span>
              </li>
              <li v-for="item in $store.state.TanGoods.yuyueList">
                <span class="order">{{item.orderNo}}<br>{{item.yzOrderNo}}</span>
                <span class="name text-left">
                  <p>{{item.productName}}</p>
                  <p class="txt">{{item.sku}}</p>
                </span>
                <span class="price text-left green">{{item.price?item.price/100:'0'}}</span>
                <span class="numb text-left">x{{item.count?item.count:'0'}}</span>
                <span class="pay text-left">{{item.payPrice?item.payPrice/100:'0'}}</span>
                <span class="customer text-left">
                  <p>{{item.customerName}}</p>
                  <p>{{item.customerPhone}}</p>
                </span>
                <span class="content">
                  <p v-html="item.appointmentContent"></p>
                </span>
                <span class="downTime">
                  <p>{{item.createTime | getDate}}</p>
                  <p>{{item.createTime | getTime}}</p>
                </span>
                <span class="updateTime">
                  <p>{{item.updateTime | getDate}}</p>
                  <p>{{item.updateTime | getTime}}</p>
                </span>
                <span class="orderType">
                  {{item.appointmentStatusDesc}}
                </span>
              </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="3" class="text-left">
        <el-button type="success" size="small" v-show="activeName=='one'" @click="push">发送微信提醒</el-button>
        <el-button type="success" size="small" v-show="activeName=='three'" @click="pushChangeDialog(6)">发送提醒</el-button>
        &nbsp
      </el-col>
      <el-col :span="3" class="text-left">
        <!-- <el-button type="danger" size="small" v-show="activeName=='one'">发送短信提醒</el-button> -->
        &nbsp
      </el-col>
      <el-col :span="18" class="text-right">
        共{{this.$store.state.TanGoods.total}}条
        <span style="display:inline-block; min-width:100px;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :page-count="$store.state.TanGoods.pages">
          </el-pagination>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
var url;
export default {
  data() {
    return {
      form: {
        orderNumb: '',
        productName: '',
        orderTime: '',
        userName: '',
        userPhone: '',
        appointmentTime: ''
      },
      checked: true,
      checkAll: false,
      checkedCities: [],
      value: '',
      activeName: 'one',
      page: 1,
    }
  },
  filters: {
    getDate: function(val) {
      var date = new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      var day = date.getDate();
      if (day < 10) {
        day = '0' + day;
      }
      return year + "-" + month + "-" + day;
    },
    getTime: function(val) {
      var date = new Date();
      date.setTime(val);
      var hours = date.getHours();
      if (hours < 10) {
        hours = '0' + hours;
      }
      var minutes = date.getMinutes();
      if (minutes < 10) {
        minutes = '0' + minutes;
      }
      return hours + ":" + minutes
    }
  },
  methods: {
    push: function() {
      if (this.checkedCities.length == 0) {
        this.$message({
          showClose: true,
          message: '请勾选订单',
          type: 'error'
        });
        return;
      }
      this.$store.dispatch('showLoading', 'TanGoods');
      var that = this;
      var str = '';
      for (let i = 0; i < this.checkedCities.length; i++) {
        str = str + this.checkedCities[i] + ',';
      }
      axios.get(url + '/v1/push/wechat', {
        params: {
          templateCode: 'YYTX',
          orderIds: str
        }
      }).then((res) => {
        if (res.data.code == 0) {
          this.$store.dispatch('closeLoading', 'TanGoods');
          this.$message({
            showClose: true,
            message: '发送成功',
            type: 'success'
          });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch((err) => {

      })
    },
    pushChangeDialog: function(type) {
      this.$store.dispatch('showLoading', 'TanGoods');
      var str = '';
      for (let i = 0; i < this.checkedCities.length; i++) {
        str = str + this.checkedCities[i] + ',';
      }
      axios.get(url + '/v1/push/wechat/preview', {
        params: {
          orderIds: str,
          templateCode: 'YWYYBQX'
        }
      }).then((res) => {
        if (res.data.code == 0) {
          var json1 = {
            'type': type,
            'name': 'TanGoods',
            'pushId': this.checkedCities,
            'title': '推送内容配置'
          }
          this.$store.dispatch('changeDialog', json1);
          var json2 = {}
          for (let i = 0; i < res.data.data.length; i++) {
            let item = res.data.data[i];
            if (item.label == '预约项目') {
              json2.productName = item.value;
            }
            if (item.label == '预约时间') {
              json2.time = item.value;
            }
          }
          this.$store.dispatch('wxpush', json2);
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
        this.$store.dispatch('closeLoading', 'TanGoods');
      }).catch((err) => {

      })
      //this.$store.dispatch('push',json1);

    },
    res: function(id, type) {
      var that = this;
      this.$confirm('操作不可逆，确认操作？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         axios.get(url + '/v1/orders/updatePreAgreedOrderStatus', {
           params: {
             orderIds: id,
             status: type
           }
         }).then((res) => {
           if (res.data.code == 0) {
             that.$message({
               showClose: true,
               message: '成功',
               type: 'success'
             });
             that.getList();
           } else {
             that.$message({
               showClose: true,
               message: res.data.msg,
               type: 'error'
             });
           }
         }).catch((err) => {
           // that.$message({
           //   showClose: true,
           //   message: '发生错误',
           //   type: 'error'
           // });
         })
       }).catch(() => {
       });

    },
    find: function() {
      this.getList();
    },
    getList: function() {
      this.$store.dispatch('showLoading', 'TanGoods');
      if (this.form.orderTime != '') {
        var time = this.form.orderTime.getTime()
      } else {
        var time = '';
      }
      if (this.form.appointmentTime != '') {
        var yyTime = this.form.appointmentTime.getTime()
      } else {
        var yyTime = '';
      }
      if (this.activeName == 'one') {
        var type = 0;
      } else if (this.activeName == 'two') {
        var type = 1;
      } else if (this.activeName == 'three') {
        var type = 3;
      } else if (this.activeName == 'four') {
        var type = '';
      }
      var json1 = {
        'orderNo': this.form.orderNumb,
        'orderTime': time,
        'otaPlatform': '',
        'pageCount': 10,
        'pageIndex': this.page,
        'productName': this.form.productName,
        'sort': '',
        'status': '',
        'type': 1,
        'appointmentTime': yyTime,
        'appointmentStatus': type,
        'userName': this.form.userName,
        'userPhone': this.form.userPhone
      };
      this.$store.dispatch('getAllGoodsList', json1);
    },

    handleCurrentChange(val) {
      this.getList();
    },
    changeDialog: function(type, id) {
      var json1 = {
        'type': type,
        'name': 'TanGoods',
        'id': id,
        'groupType': 1,
        'title': '订单详情'
      }
      this.$store.dispatch('changeDialog', json1);
    },
    handleCheckAllChange(event) {
      this.checkedCities = event.target.checked ? this.$store.state.TanGoods.checkAll : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {}
  },
  watch: {
    activeName(val) {
      this.getList();
    }
  },
  created() {
    url = this.$store.state.url;
    this.getList();
  }
}
</script>

<style>
.yuyueBox .allcheck .el-checkbox__label {
  display: inline-block;
}

.yuyueBox .el-checkbox__label {
  display: none;
}

.yuyueBox .el-checkbox {
  vertical-align: top;
}
</style>
<style lang="Sass" scoped>
  .yuyueBox{width: 100%; height: 100%;padding: 20px 10px 10px 10px; box-sizing: border-box;

    .formBox{ background: #fff; padding: 10px; text-align: left;

      .text{ height: 30px;
        .el-input__inner{height: 30px; width: 100%;}
      }
      .date{width: 150px; height: 30px;
        .el-input__inner{height: 30px; width: 100%;}
      }
      .select{width: 120px;
        .el-input__inner{width: 100%;}
      }
    }
    span{font-size: 12px; line-height: 30px;}
    .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px;}
    .box2{border-radius: 0 0 10px 10px; padding: 0 10px 20px 10px;}
    .tableBox{background: #fff; padding: 20px; margin-top: 20px; border-radius: 10px;}
    .cell{text-align: left;}
    .btn{height: 32px;
      span{line-height: 0px;  }
    }
  }
  .listBox3{width: 100%; background: #fff;

    .first{display: flex; height: 30px; text-align: left; padding: 0 5px;

        span{display: inline-block; font-size: 12px; line-height: 30px;}
        .order{flex: 0 0 220px;
          .el-checkbox__inner{width: 14px; height: 14px; margin-top: 10px;}
          .el-checkbox__inner::after{left: 3px; top:0px;}
        }
        .name{flex: 1;}
        .price{flex: 0 0 80px;}
        .numb{flex: 0 0 50px;}
        .pay{flex: 0 0 80px;}
        .customer{flex: 0 0 110px;}
        .content{flex: 0 0 90px;}
        .downTime{flex: 0 0 90px; line-height: 30px; margin-top: 0px;}
        .updateTime{flex: 0 0 80px; line-height: 30px; margin-top: 0px;}
        .orderType{flex: 0 0 80px;}
    }
    li{display: flex; height: auto;  text-align: left; padding: 15px 5px 5px 5px; box-sizing: border-box;

      span{display: inline-block; box-sizing: border-box; color: #333; line-height: 14px;}
      .order{flex: 0 0 220px; height: auto; }
      .name{flex: 1;
        p{line-height: 14px; width: 90%; font-size: 12px;}
        .txt{color: #999; line-height: 14px; margin-top: 0px;}
      }
      .price{flex: 0 0 80px;}
      .numb{flex: 0 0 50px;}
      .pay{flex: 0 0 80px;}
      .customer{flex: 0 0 110px;
        p{line-height: 14px; margin-top: 0px; font-size: 12px;}
      }
      .content{flex: 0 0 90px;
        p{font-size: 12px;}
      }
      .YYcontent{flex: 0 0 120px;
        p{font-size: 12px;}
      }
      .downTime{flex: 0 0 90px; line-height: 12px;
        p{margin-bottom: 5px; font-size: 12px;}
      }
      .updateTime{flex: 0 0 80px; line-height: 12px;
        p{margin-bottom: 5px; font-size: 12px;}
      }
      .orderType{flex: 0 0 80px; cursor: pointer;
        p{font-size: 12px;}
      }
      .YYorderType{flex: 0 0 80px;
        p{margin-bottom: 10px;}
        span{cursor: pointer;}
      }
    }
    li:nth-of-type(even){background: #FAFAFC;}

  }
  .listBox4{width: 100%; background: #fff;

    .first{display: flex; height: 30px; text-align: left; padding: 0 5px;

        span{display: inline-block; font-size: 14px; line-height: 30px;}
        .order{flex: 0 0 220px;
          .el-checkbox__inner{width: 14px; height: 14px; margin-top: 10px;}
          .el-checkbox__inner::after{left: 3px; top:0px;}
        }
        .name{flex: 1;}
        .price{flex: 0 0 80px;}
        .numb{flex: 0 0 50px;}
        .pay{flex: 0 0 80px;}
        .customer{flex: 0 0 110px;}
        .content{flex: 0 0 90px;}
        .downTime{flex: 0 0 90px; line-height: 30px; margin-top: 0px;}
        .updateTime{flex: 0 0 80px; line-height: 30px; margin-top: 0px;}
        .orderType{flex: 0 0 80px;}
    }
    li{display: flex; height: auto;  text-align: left; padding: 15px 5px 5px 5px; box-sizing: border-box;

      span{display: inline-block; box-sizing: border-box; color: #333; line-height: 14px;}
      .order{flex: 0 0 220px; height: auto;}
      .name{flex: 1;
        p{line-height: 14px; width: 90%; font-size: 12px;}
        .txt{color: #999; line-height: 14px; margin-top: 0px;}
      }
      .price{flex: 0 0 80px;}
      .numb{flex: 0 0 50px;}
      .pay{flex: 0 0 80px;}
      .customer{flex: 0 0 110px;
        p{line-height: 14px; margin-top: 0px; font-size: 13px;}
      }
      .content{flex: 0 0 90px;
        p{font-size: 12px;}
      }
      .YYcontent{flex: 0 0 120px;
        p{font-size: 12px;}
      }
      .downTime{flex: 0 0 90px; line-height: 12px;
        p{margin-bottom: 5px; font-size: 12px;}
      }
      .updateTime{flex: 0 0 80px; line-height: 12px;
        p{margin-bottom: 5px; font-size: 12px;}
      }
      .orderType{flex: 0 0 80px; cursor: pointer;}
      .YYorderType{flex: 0 0 80px;
        p{margin-bottom: 10px;}
        span{cursor: pointer;}
      }
    }
    li:nth-of-type(odd){background: #FAFAFC;}

  }
</style>
